<template>
  <view class="comment-container">

    <!-- 评分区域 -->
    <view class="rating-section">
      <text class="section-title">星级评分</text>
      <view class="stars">
        <uni-rate v-model="rating" :value="rating" :size="20" active-color="#FFD700" @change="onChange" />
      </view>
      <text class="rating-text">评分{{rating}}分</text>
    </view>

    <!-- 提示区域 -->
    <view class="tips-section">
      <text class="tip-text">说说你读过之后的感受吧！</text>
      <text class="reward-text">评论可得5积分（至少评论20个字才可得分哦~）</text>
    </view>

    <!-- 评论输入框 -->
    <view class="comment-input-section">
      <textarea class="comment-input" placeholder="写下您的评论..." maxlength="256" v-model="comment"
        @input="updateWordCount"></textarea>
      <text class="word-count">{{wordCount}}/256</text>
    </view>

    <!-- 发表按钮 -->
    <view class="submit-section">
      <button class="submit-btn" :disabled="!canSubmit" @click="submitComment">发表</button>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      // 是否编辑模式
      isEditMode: {
        type: Boolean,
        default: false
      },
      // 编辑时的初始数据
      initialData: {
        type: Object,
        default: () => ({
          rating: 5,
          content: ''
        })
      }
    },
    data() {
      return {
        id: '',
        rating: 5,
        comment: '',
        wordCount: 0
      }
    },
    watch: {
      // 监听初始数据变化，用于编辑模式
      initialData: {
        handler(newVal) {
          if (newVal && this.isEditMode) {
            this.id = newVal.id || null
            this.rating = newVal.rating || 5
            this.comment = newVal.content || ''
            this.wordCount = this.comment.length
          }
        },
        immediate: true,
        deep: true
      }
    },
    computed: {
      canSubmit() {
        return this.comment.trim().length >= 20
      }
    },
    methods: {
      onChange(e) {
        this.rating = e.value
      },
      updateWordCount(e) {
        this.wordCount = e.detail.value.length
      },
      submitComment() {
        if (!this.canSubmit) return

        const commentData = {
          id: this.id,
          rating: this.rating,
          content: this.comment,
        }
        if(!this.isEditMode)commentData.createTime=new Date().toISOString()
        else commentData.updateTime=new Date().toISOString()
        // 通过事件通知父组件
        this.$emit('submit', commentData)

        uni.showLoading({
          title: this.isEditMode ? '更新中...' : '提交中...'
        })

        // 模拟API请求
        setTimeout(() => {
          uni.hideLoading()
          uni.showToast({
            title: this.isEditMode ? '更新成功' : '评论成功',
            icon: 'success'
          })

          // 如果是添加模式，返回上一页
          if (!this.isEditMode) {
            setTimeout(() => {
              uni.navigateBack()
            }, 1500)
          }
        }, 1500)
      }
    }
  }
</script>

<style lang="scss">
  .comment-container {
    background-color: #f5f5f5;
    min-height: 100vh;
    padding-bottom: 120rpx;
  }

  /* 评分区域 */
  .rating-section {
    padding: 40rpx 30rpx;
    background-color: #fff;
    margin-bottom: 20rpx;

    .section-title {
      font-size: 32rpx;
      color: #666;
      margin-bottom: 20rpx;
      display: block;
    }

    .stars {
      display: flex;
      gap: 10rpx;
      margin-bottom: 15rpx;
    }

    .rating-text {
      font-size: 28rpx;
      color: #333;
    }
  }

  /* 提示区域 */
  .tips-section {
    padding: 30rpx;
    background-color: #fff;
    margin-bottom: 20rpx;

    .tip-text {
      font-size: 32rpx;
      color: #333;
      margin-bottom: 15rpx;
      display: block;
    }

    .reward-text {
      font-size: 26rpx;
      color: #666;
    }
  }

  /* 评论输入框 */
  .comment-input-section {
    padding: 30rpx;
    background-color: #fff;
    margin-bottom: 20rpx;

    .comment-input {
      width: 100%;
      min-height: 300rpx;
      font-size: 28rpx;
      line-height: 1.6;
      background-color: #fff;
      border: 1rpx solid #e0e0e0;
      border-radius: 12rpx;
      padding: 20rpx;
      margin-bottom: 15rpx;
    }

    .word-count {
      font-size: 24rpx;
      color: #999;
      text-align: right;
    }
  }

  /* 发表按钮 */
  .submit-section {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20rpx;
    background-color: #fff;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

    .submit-btn {
      background-color: #FF0000;
      color: #fff;
      border-radius: 50rpx;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 32rpx;

      &[disabled] {
        background-color: #FF9999;
      }
    }
  }
</style>
